<template>
  <div class="teacher-course">
    <nav-bar></nav-bar>
    <div v-loading.body="loading">
      <no-content text="无法获取课程数据" v-if="!loading && (!course || list.length === 0)" ></no-content>
      <div v-if="course" class="xyd-video">
        <div class="xyd-container">
          <div class="xyd-c-title clearfix">
            <span style="float:left;padding-left:20px;">{{course.title}}</span>
            <!-- <span style="float:left;margin-left:15px;font-size:14px;color:#999;">
              主讲：{{'todo'}}
            </span> -->
          </div>
          <div class="xyd-c-content">
            <video-player
              v-if="course.url"
              class="video-player-box"
              ref="videoPlayer"
              :options="playerOptions"
              :playsinline="true"
              customEventName="customstatechangedeventname"
              >
            </video-player>
            <!-- <video :src="course.url" controls>
            </video> -->
            <!-- <video-player
              v-if="course.url"
              class="video-player-box"
              ref="videoPlayer"
              :options="playerOptions"
              :playsinline="true"
              customEventName="customstatechangedeventname"

              @play="onPlayerPlay($event)"
              @pause="onPlayerPause($event)"
              @ended="onPlayerEnded($event)"
              @waiting="onPlayerWaiting($event)"
              @playing="onPlayerPlaying($event)"
              @loadeddata="onPlayerLoadeddata($event)"
              @timeupdate="onPlayerTimeupdate($event)"
              @canplay="onPlayerCanplay($event)"
              @canplaythrough="onPlayerCanplaythrough($event)"

              @statechanged="playerStateChanged($event)"
              @ready="playerReadied"
              >
            </video-player> -->
          </div>
        </div>
      </div>
      <div v-if="list && list.length !== 0" class="course-main clearfix">
        <div class="course-left">
          <div class="xyd-container">
            <div class="xyd-c-title clearfix">
              <span class="title">课程目录</span>
              <button class="orange-btn" @click="handleBuyAll">购买全部课程（7.5折）</button>
            </div>
            <div class="xyd-c-content">
              <ul>
                <li v-for="item, i in list" :key="i">
                  <span class="title"><a @click="selectCourse(item)">{{item.title}}</a></span>
                  <span style="margin-left: 100px;color:#999">{{item.price}}{{item.yd_type == 0 ?'普通语点':item.yd_type == 1 ?'钻石语点':'语点'}}</span>
                  <span style="float:right;color:#ccc;" @click="handleBuy(item)" v-if="item.isbuy == 1">已购买</span>
                  <button class="blue-btn-outline" style="width: 110px;float:right;" @click="handleBuy(item)" v-if="item.isbuy != 1">立即购买</button>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="course-right">
          <div class="xyd-container">
            <div class="xyd-c-title">课程简介</div>
            <div class="xyd-c-content" style="padding:15px;">
              {{course.intro}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import { getTeacherCourse, buyCourse } from 'api/teacher'
import { NoContent } from 'components/Sit'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'

export default {
  name: 'teacher-course',
  components: {
    NavBar,
    NoContent,
    videoPlayer
  },
  data() {
    return {
      list: [],
      course: {},
      loading: false,
      options: {
        autoplay: false,
        volume: 0.6
      },
      playerOptions: {
        // videojs options
        width: 1200,
        height: 500,
        // muted: true,
        language: 'ch',
        sources: [{
          type: 'video/mp4',
          src: ''
        }]
      }
    };
  },
  created() {
    this.routerChange(this.$route)
  },
  methods: {
    routerChange(route) {
      const { id } = route.params
      const { content, title } = route.query
      this.loading = true
      getTeacherCourse({
        tid: id
      })
      .then(res => {
        console.log(res)
        this.loading = false
        this.list = res.course_list
        this.course = res.course
        this.playerOptions.sources[0].src = res.course.url
        if (content) {
          this.course.url = content
          this.playerOptions.sources[0].src = content
        }
        if (title) {
          this.course.title = title
        }
        console.log(this)
      })
      .catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    handleBuy(item) {
      buyCourse({
        cid: item.id
      })
      .then(res => {
        this.$message({
          message: '购买成功',
          type: 'success',
          onClose() {
            location.reload()
          }
        })
      })
      .catch(err => {
        this.$message({
          message: err.msg,
          type: 'error',
          onClose() {
            location.reload()
          }
        })
      })
    },
    handleBuyAll() {
      const cid = this.list.filter(v => v.isbuy != 1).map(v => v.id).join(',')
      if (cid == '') {
        this.$message({
          message: '您已购买全部课程',
          type: 'warning'
        })
        return false
      }
      buyCourse({
        type: 'all',
        cid: this.list.filter(v => v.isbuy != 1).map(v => v.id)
      })
      .then(res => {
        this.$message({
          message: '购买成功',
          type: 'success',
          onClose() {
            location.reload()
          }
        })
      })
      .catch(err => {
        console.log(err)
        this.$message({
          message: err.msg,
          type: 'error',
          onClose() {
            location.reload()
          }
        })
      })
    },
    selectCourse(item) {
      if (item.isbuy === 0) {
        this.$message({
          message: '您还未购买',
          type: 'warning'
        })
        return false
      }
      const { id } = this.$route.params
      this.$router.replace('/teacher-course/' + id + '?content=' + item.url + '?title=' + item.title)
      this.course.url = item.url
      this.playerOptions.sources[0].src = item.url
      this.course.title = item.title
    },
    watch: {
      '$route'(to, from) {
        this.routerChange(this.$route)
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '../../styles/mixin.scss';
.teacher-course{
  .xyd-video{
    width: 1200px;
    margin: 0 auto;
    min-height: 500px;
    .xyd-container{
      .xyd-c-content{
        video{
          width: 100%;
        }
      }
    }
  }
  .course-main{
    margin: 0 auto;
    width: 1200px;
    .course-left{
      float: left;
      width: 960px;
      .xyd-container{
        .xyd-c-title{
          position: relative;
          .title{
            float: left;
            padding-left: 20px;
          }
          .orange-btn{
            position: absolute;
            right: 10px;
            top: 10px;
            width: 200px;
            height: 30px;
            font-size: 12px;
          }
        }
        .xyd-c-content{
          padding: 0 40px;
          >ul{
            >li{
              &:last-child{
                border: none;
              }
              padding: 30px 0;
              border-bottom: 1px solid #e5e6e7;
              .title{
                display: inline-block;
                vertical-align: middle;
                @include ellipsis(200px)
                a{
                  &:hover{
                    text-decoration: underline;
                    color: #00A2EA;
                  }
                }
              }
            }
          }
        }
      }
    }
    .course-right{
      float: left;
      margin-left: 20px;
      width: 220px;
    }
  }
}
</style>